<title>导航</title>

<div class="page animation-fade">
    <div class="page-header">
        <h1 class="page-title">导航</h1>
        <div class="page-header-actions">
            <form>
                <div class="input-search input-search-dark">
                    <i class="input-search-icon wb-search" aria-hidden="true"></i>
                    <input type="text" class="form-control" name="" placeholder="搜索...">
                </div>
            </form>
        </div>
    </div>
    <div class="page-content container-fluid">

        <div class="panel">
            <div class="panel-body">
                <div class="row row-lg">
                    <div class="col-sm-6">

                        <div class="example-wrap">
                            <h4 class="example-title">胶囊式导航</h4>
                            <div class="example">
                                <ul class="nav nav-pills">
                                    <li class="active" role="presentation">
                                        <a href="javascript:;">首页</a>
                                    </li>
                                    <li role="presentation">
                                        <a href="javascript:;">个人简介</a>
                                    </li>
                                    <li class="disabled" role="presentation">
                                        <a href="javascript:;">消息</a>
                                    </li>
                                </ul>
                            </div>
                        </div>

                    </div>
                    <div class="col-sm-6">

                        <div class="example-wrap">
                            <h4 class="example-title">带图标</h4>
                            <div class="example">
                                <ul class="nav nav-pills">
                                    <li class="active" role="presentation">
                                        <a href="javascript:;"><i class="icon wb-home" aria-hidden="true"></i> 首页</a>
                                    </li>
                                    <li role="presentation">
                                        <a href="javascript:;"><i class="icon wb-user" aria-hidden="true"></i> 个人简介</a>
                                    </li>
                                    <li class="disabled" role="presentation">
                                        <a href="javascript:;"><i class="icon wb-chat" aria-hidden="true"></i> 消息</a>
                                    </li>
                                </ul>
                            </div>
                        </div>

                    </div>
                    <div class="col-sm-6">

                        <div class="example-wrap margin-sm-0">
                            <h4 class="example-title">堆叠</h4>
                            <div class="example">
                                <ul class="nav nav-pills nav-stacked">
                                    <li class="active" role="presentation">
                                        <a href="javascript:;"><i class="icon wb-home" aria-hidden="true"></i> 首页</a>
                                    </li>
                                    <li role="presentation">
                                        <a href="javascript:;"><i class="icon wb-user" aria-hidden="true"></i> 个人简介</a>
                                    </li>
                                    <li class="disabled" role="presentation">
                                        <a href="javascript:;"><i class="icon wb-chat" aria-hidden="true"></i> 消息</a>
                                    </li>
                                </ul>
                            </div>
                        </div>

                    </div>
                    <div class="col-sm-6">

                        <div class="example-wrap">
                            <h4 class="example-title">带下拉菜单</h4>
                            <div class="example">
                                <ul class="nav nav-pills">
                                    <li class="active" role="presentation">
                                        <a href="javascript:;"><i class="icon wb-home" aria-hidden="true"></i> 首页</a>
                                    </li>
                                    <li role="presentation">
                                        <a href="javascript:;"><i class="icon wb-help-circle" aria-hidden="true"></i> 帮助
                                        </a>
                                    </li>
                                    <li class="dropdown" role="presentation">
                                        <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false" role="button">
                                            <i class="icon wb-wrench" aria-hidden="true"></i> 更多
                                            <span class="caret"></span></a>
                                        <ul class="dropdown-menu" role="menu">
                                            <li role="presentation">
                                                <a href="javascript:;" role="menuitem">菜单一</a>
                                            </li>
                                            <li role="presentation">
                                                <a href="javascript:;" role="menuitem">菜单二</a>
                                            </li>
                                            <li role="presentation">
                                                <a href="javascript:;" role="menuitem">菜单三</a>
                                            </li>
                                            <li class="divider" role="presentation"></li>
                                            <li role="presentation">
                                                <a href="javascript:;" role="menuitem">菜单四</a>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>


        <div class="panel">
            <div class="panel-body">
                <div class="row row-lg">
                    <div class="col-lg-6">

                        <div class="example-wrap">
                            <h4 class="example-title">选项卡导航</h4>
                            <div class="example">
                                <ul class="nav nav-tabs">
                                    <li class="active">
                                        <a data-toggle="tab" href="javascript:;">首页</a>
                                    </li>
                                    <li>
                                        <a data-toggle="tab" href="javascript:;">最新</a>
                                    </li>
                                    <li>
                                        <a data-toggle="tab" href="javascript:;">最热</a>
                                    </li>
                                    <li>
                                        <a data-toggle="tab" href="javascript:;">深度</a>
                                    </li>
                                </ul>
                            </div>
                        </div>

                    </div>
                    <div class="col-lg-6">

                        <div class="example-wrap">
                            <h4 class="example-title">线性</h4>
                            <div class="example">
                                <ul class="nav nav-tabs nav-tabs-line">
                                    <li class="active">
                                        <a data-toggle="tab" href="javascript:;">首页</a>
                                    </li>
                                    <li>
                                        <a data-toggle="tab" href="javascript:;">最新</a>
                                    </li>
                                    <li>
                                        <a data-toggle="tab" href="javascript:;">最热</a>
                                    </li>
                                    <li>
                                        <a data-toggle="tab" href="javascript:;">深度</a>
                                    </li>
                                </ul>
                            </div>
                        </div>

                    </div>
                    <div class="col-lg-6">

                        <div class="example-wrap margin-lg-0">
                            <h4 class="example-title">竖向选项卡</h4>
                            <div class="example">
                                <div class="nav-tabs-vertical">
                                    <ul class="nav nav-tabs">
                                        <li class="active">
                                            <a data-toggle="tab" href="javascript:;">首页</a>
                                        </li>
                                        <li>
                                            <a data-toggle="tab" href="javascript:;">最新</a>
                                        </li>
                                        <li>
                                            <a data-toggle="tab" href="javascript:;">最热</a>
                                        </li>
                                        <li>
                                            <a data-toggle="tab" href="javascript:;">深度</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="col-lg-6">

                        <div class="example-wrap">
                            <h4 class="example-title">竖向线性</h4>
                            <div class="example">
                                <div class="nav-tabs-vertical">
                                    <ul class="nav nav-tabs nav-tabs-line">
                                        <li class="active">
                                            <a data-toggle="tab" href="javascript:;">首页</a>
                                        </li>
                                        <li>
                                            <a data-toggle="tab" href="javascript:;">最新</a>
                                        </li>
                                        <li>
                                            <a data-toggle="tab" href="javascript:;">最热</a>
                                        </li>
                                        <li>
                                            <a data-toggle="tab" href="javascript:;">深度</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>


        <div class="example-wrap">
            <h4 class="example-title">菜单</h4>

            <div class="example">
                <ul class="nav-quick nav-quick-sm row">
                    <li class="col-sm-2 col-xs-4">
                        <a href="javascript:;"><i class="icon wb-settings" aria-hidden="true"></i> 设置</a>
                    </li>
                    <li class="col-sm-2 col-xs-4">
                        <a href="javascript:;"><i class="icon wb-user" aria-hidden="true"></i> 用户列表
                            <span class="label label-success">8</span></a>
                    </li>
                    <li class="col-sm-2 col-xs-4">
                        <a href="javascript:;"><i class="icon wb-wrench" aria-hidden="true"></i> 工具</a>
                    </li>
                    <li class="col-sm-2 col-xs-4">
                        <a href="javascript:;"><i class="icon wb-upload" aria-hidden="true"></i> 上传
                            <span class="label label-danger">13</span></a>
                    </li>
                    <li class="col-sm-2 col-xs-4">
                        <a href="javascript:;"><i class="icon wb-lock" aria-hidden="true"></i> 账户</a>
                    </li>
                    <li class="col-sm-2 col-xs-4">
                        <a href="javascript:;"><i class="icon wb-search" aria-hidden="true"></i> 搜索</a>
                    </li>
                </ul>
            </div>


            <div class="example">
                <ul class="nav-quick row">
                    <li class="col-sm-2 col-xs-4">
                        <a href="javascript:;"><i class="icon wb-settings" aria-hidden="true"></i> 设置</a>
                    </li>
                    <li class="col-sm-2 col-xs-4">
                        <a href="javascript:;"><i class="icon wb-user" aria-hidden="true"></i> 用户列表
                            <span class="label label-success">8</span></a>
                    </li>
                    <li class="col-sm-2 col-xs-4">
                        <a href="javascript:;"><i class="icon wb-wrench" aria-hidden="true"></i> 工具</a>
                    </li>
                    <li class="col-sm-2 col-xs-4">
                        <a href="javascript:;"><i class="icon wb-upload" aria-hidden="true"></i> 上传
                            <span class="label label-danger">13</span></a>
                    </li>
                    <li class="col-sm-2 col-xs-4">
                        <a href="javascript:;"><i class="icon wb-lock" aria-hidden="true"></i> 账户</a>
                    </li>
                    <li class="col-sm-2 col-xs-4">
                        <a href="javascript:;"><i class="icon wb-search" aria-hidden="true"></i> 搜索</a>
                    </li>
                </ul>
            </div>


            <div class="example">
                <ul class="nav-quick nav-quick-lg row">
                    <li class="col-sm-2 col-xs-4">
                        <a href="javascript:;"><i class="icon wb-settings" aria-hidden="true"></i> 设置</a>
                    </li>
                    <li class="col-sm-2 col-xs-4">
                        <a href="javascript:;"><i class="icon wb-user" aria-hidden="true"></i> 用户列表
                            <span class="label label-success">8</span></a>
                    </li>
                    <li class="col-sm-2 col-xs-4">
                        <a href="javascript:;"><i class="icon wb-wrench" aria-hidden="true"></i> 工具</a>
                    </li>
                    <li class="col-sm-2 col-xs-4">
                        <a href="javascript:;"><i class="icon wb-upload" aria-hidden="true"></i> 上传
                            <span class="label label-danger">13</span></a>
                    </li>
                    <li class="col-sm-2 col-xs-4">
                        <a href="javascript:;"><i class="icon wb-lock" aria-hidden="true"></i> 账户</a>
                    </li>
                    <li class="col-sm-2 col-xs-4">
                        <a href="javascript:;"><i class="icon wb-search" aria-hidden="true"></i> 搜索</a>
                    </li>
                </ul>
            </div>


            <div class="example">
                <ul class="nav-quick nav-quick-bordered row">
                    <li class="col-sm-2 col-xs-4">
                        <a href="javascript:;"><i class="icon wb-settings" aria-hidden="true"></i> 设置</a>
                    </li>
                    <li class="col-sm-2 col-xs-4">
                        <a href="javascript:;"><i class="icon wb-user" aria-hidden="true"></i> 用户列表
                            <span class="label label-success">8</span></a>
                    </li>
                    <li class="col-sm-2 col-xs-4">
                        <a href="javascript:;"><i class="icon wb-wrench" aria-hidden="true"></i> 工具</a>
                    </li>
                    <li class="col-sm-2 col-xs-4">
                        <a href="javascript:;"><i class="icon wb-upload" aria-hidden="true"></i> 上传
                            <span class="label label-danger">13</span></a>
                    </li>
                    <li class="col-sm-2 col-xs-4">
                        <a href="javascript:;"><i class="icon wb-lock" aria-hidden="true"></i> 账户</a>
                    </li>
                    <li class="col-sm-2 col-xs-4">
                        <a href="javascript:;"><i class="icon wb-search" aria-hidden="true"></i> 搜索</a>
                    </li>
                </ul>
            </div>

        </div>

    </div>
</div>
